<template>
  <div>
      <!--    搜索栏-->
      <el-card id="serch">
          <el-row>
              <el-col :span="18">
                  <div class="grid-content bg-purple">
                      <el-input v-model="searchModel.name" placeholder="请输入学生姓名"></el-input>
                      <el-select v-model="searchModel.clazz" filterable clearable placeholder="请选择班级">
                          <el-option v-for="item in clazzname" :key="item.value" :label="item.label" :value="item.value">
                          </el-option>
                      </el-select>
                      <el-button @click="getStudentList" type="primary" icon="el-icon-search">搜索</el-button>
                  </div>
              </el-col>
              <el-col :span="6" align="right">
                  <div class="grid-content bg-purple">
                      <el-button @click="OpenEditUI(null)" type="primary" icon="el-icon-plus">添加</el-button>
                  </div>
              </el-col>
          </el-row>
      </el-card>
      <!--    结果栏-->
      <el-card>
          <el-table :data="studentList" border style="width: 100%">
              <el-table-column label="#" width="80" align="center">
                  <template slot-scope="scope">
                      {{ (searchModel.pageNo - 1) * searchModel.pageSize + scope.$index + 1 }}
                  </template>
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="120" align="center">
              </el-table-column>
              <el-table-column prop="uid" label="学号" width="120" align="center">
              </el-table-column>
              <el-table-column prop="chinese" label="语文" width="120" align="center">
              </el-table-column>
              <el-table-column prop="math" label="数学" width="120" align="center">
              </el-table-column>
              <el-table-column prop="english" label="英语" width="120" align="center">
              </el-table-column>
              <el-table-column prop="wuli" label="物理" width="120" align="center">
              </el-table-column>
              <el-table-column prop="huaxue" label="化学" width="120" align="center">
              </el-table-column>
              <el-table-column prop="shengwu" label="生物" width="120" align="center">
              </el-table-column>
              <el-table-column prop="lishi" label="历史" width="120" align="center">
              </el-table-column>
              <el-table-column prop="dili" label="地理" width="120" align="center">
              </el-table-column>
              <el-table-column prop="num" label="总分" width="120" align="center">
                  <!-- {{ studentList[wuli] }} -->
              </el-table-column>
              <el-table-column prop="clazzName" label="班级" width="120">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="130">
                  <template slot-scope="scope">
                      <el-button @click="openDialog(scope.row.uid)" type="text" size="small">查看</el-button>
                      <el-button @click="OpenEditUI(scope.row.uid)" type="text" size="small">编辑</el-button>
                      <el-button @click="deleteStudent(scope.row)" type="text" size="small">删除</el-button>
                  </template>
              </el-table-column>
          </el-table>
      </el-card>

      <div class="block">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="searchModel.pageNo" :page-sizes="[5, 10, 15, 20]" :page-size="searchModel.pageSize"
              layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
          <!-- 用户信息编辑对话框 -->
          <el-dialog @close="clearForm" :title="title" :visible.sync="dialogFormVisible">
              <el-form :model="studentForm">
                  <el-form-item label="姓名" :label-width="formLabelWidth">
                      <el-input v-model="studentForm.name" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="学号" :label-width="formLabelWidth">
                      <el-input v-model="studentForm.uid" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="班级" :label-width="formLabelWidth">
                      <el-select v-model="studentForm.clazzName" filterable clearable placeholder="请选择班级">
                          <el-option v-for="item in clazzname" :key="item.value" :label="item.label" :value="item.value">
                          </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="语文" :label-width="formLabelWidth">
                      <el-input v-model="studentForm.chinese" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="数学" :label-width="formLabelWidth">
                      <el-input v-model="studentForm.math" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="英语" :label-width="formLabelWidth">
                      <el-input v-model="studentForm.english" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="物理" :label-width="formLabelWidth">
                      <el-input v-model="studentForm.wuli" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="化学" :label-width="formLabelWidth">
                      <el-input v-model="studentForm.huaxue" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="生物" :label-width="formLabelWidth">
                      <el-input v-model="studentForm.shengwu" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="历史" :label-width="formLabelWidth">
                      <el-input v-model="studentForm.lishi" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="政治" :label-width="formLabelWidth">
                      <el-input v-model="studentForm.zhengzhi" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="地理" :label-width="formLabelWidth">
                      <el-input v-model="studentForm.dili" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="总分" :label-width="formLabelWidth">
                      <el-input v-model="studentForm.num" autocomplete="off"></el-input>
                  </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <!-- <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button> -->
                  <el-button type="primary" @click="saveUser">确 定</el-button>
              </div>
          </el-dialog>

          <!-- echarts 对话框显示结果  @open="open()" -->
          <el-dialog title="各科成绩echart图" :modal-append-to-body='false' :visible.sync="newDialogFormVisible"
              append-to-body align="center">
              <el-form :inline="true" size="medium" label-width="80px">
                  <el-row :gutter="10">
                      <el-col>
                          <el-form-item>
                              <div id="newEcharts" style="width:750px;height:400px;padding-top:40px"></div>
                          </el-form-item>
                      </el-col>
                  </el-row>
              </el-form>
          </el-dialog>
      </div>
  </div>
</template>


<script>
import usersApi from '@/api/score'
import { throwStatement } from '@babel/types'

export default {
  data() {
      return {
          newDialogFormVisible: false,
          select: {},
          select1: {},
          formLabelWidth: '130px',
          studentForm: {},
          title: "",
          dialogFormVisible: false,
          echarts_e: false,
          dialog: false,
          total: 0,
          searchModel: {
              pageNo: 1,
              pageSize: 5,
              clazz: '',
          },
          studentList: [],
          clazzname: [],
          llist: []

      }

  },
  name: 'Echarts',
  methods: {
      openDialog(uid) {
          console.log('准备发请求');
          usersApi.getnumList(uid).then(response => {
              // console.log('后端返回数据：' + response.data);
              this.llist = response.data;
              // console.log('llist现在的值:' + this.llist);
              // console.log('准备调用初始化表格');
              this.initEcharts(this.llist)


          })
          this.newDialogFormVisible = true;
      },

      initEcharts(llist) {
          console.log('初始化表格：' + llist);
          var echarts = require('echarts');

          // 基于准备好的dom，初始化echarts实例
          const myChart = this.$echarts.init(document.getElementById('newEcharts'));
          // 绘制图表
          const option = {
              color: '#8FBC8F',
              tooltip: {},
              xAxis: {
                  data: ['语文', '数学', '英语', '物理', '化学', '生物', '历史', '地理', '政治'],
              },
              yAxis: {},
              series: [{
                  type: 'bar',
                  data: llist

              }]

          };
          myChart.setOption(option);
      },

      open() {
          this.$nextTick(() => {
              //  执行echarts方法
              this.initEcharts()


          })
      },
      deleteStudent(student) {
          usersApi.deleteById(student.uid).then(response => {
              this.$message({
                  message: response.message
              });
              this.getStudentList();

          });

      },
      // 获取职称下拉框数据
      getzhicheng() {
          fetch("http://localhost:9001/system/student/clazzNameList").then(response => response.json()).then(res => {
              this.clazzname = res
          });
      },
      // 保存新的数据
      saveUser() {
          usersApi.addStudent(this.studentForm).then(response => {
              this.$message({
                  message: response.message,
                  type: 'success'
              });
              this.dialogFormVisible = false;
              this.getStudentList();
          })
      },
      // 清空对话框
      clearForm() {
          this.studentForm = {};

      },
      // 学生信息编辑对话框
      OpenEditUI(uid) {
          if (uid == null) {
              this.title = "新增学生成绩";
          } else {
              this.title = "修改学生成绩";
              usersApi.getById(uid).then(response => {
                  this.studentForm = response.data;
              });
          }
          this.dialogFormVisible = true;
      },
      handleEdit(index, row) {
          console.log(index, row);
      },
      handleDelete(index, row) {
          console.log(index, row);
      },
      handleSizeChange(pageSize) {
          this.searchModel.pageSize = pageSize;
          this.getStudentList();
      },
      handleCurrentChange(pageNo) {
          this.searchModel.pageNo = pageNo;
          this.getStudentList();
      },
      // 获取列表信息
      getStudentList() {
          usersApi.getAllStudent(this.searchModel).then(response => {
              this.studentList = response.data.records;
              this.total = response.data.total;

          });
      }
  },
  // 调用默认显示的方法
  created() {
      this.getStudentList();
      this.getzhicheng();

  }
}
</script>
<style>
#serch .el-input {
  width: 200px;
  margin-right: 30px;
}

.el-dialog .el-input {
  width: 80%;
}
</style>
